@class-prefix-modal: ~'adm-modal';

.@{class-prefix-modal} {
  --z-index: var(--adm-modal-z-index, 1000);

  position: fixed;
  z-index: var(--z-index);

  .@{class-prefix-modal}-mask {
    z-index: 0;
  }
}

.@{class-prefix-modal}-wrap {
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: 280px;
  max-width: 75vw;
  transform: translate(-50%, -50%);
}
.@{class-prefix-modal}-main {
  width: 100%;
  max-height: 70vh;
  box-sizing: border-box;
  font-size: 14px;
  background-color: white;
  border-radius: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  > * {
    flex: none;
  }
  > .adm-modal-image-container {
    flex: auto;
  }
  .@{class-prefix-modal}-body {
    padding: 20px 12px 12px;
    display: flex;
    flex-direction: column;
    > * + * {
      margin-top: 8px;
    }
    &-header-wrapper {
      display: flex;
      justify-content: center;
    }
    &-header {
    }
    &-title {
      font-weight: bold;
      font-size: 18px;
      line-height: 25px;
      text-align: center;
    }
    &-content {
      font-size: 15px;
      line-height: 1.4;
      color: #333;
    }
  }
  .adm-modal-close {
    position: absolute;
    right: 8px;
    top: 8px;
    color: var(--adm-color-weak);
    padding: 4px;
    font-size: 18px;
  }
}

.@{class-prefix-modal}-footer {
  user-select: none;
  padding: 8px 12px 12px;
  &.adm-space {
    --gap-vertical: 20px;
  }
  .adm-modal-button {
    font-size: 18px;
    line-height: 25px;
    &:not(.adm-modal-button-primary) {
      padding-top: 0;
      padding-bottom: 0;
      &::before {
        display: none;
      }
      &:active {
        opacity: 0.7;
      }
    }
  }
}

.@{class-prefix-modal}-image-container {
  overflow-y: auto;
}
